<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>
<div id="Content">
    <div id="Login" align="center">
        <form action="/account/signonbyphone" method="post">
            <fieldset style="width:730px; margin:0px auto" >
                <p>PhoneNumber:<input id="Number" name="Number" type="text"  placeholder="Please enter phone number"/>
                    <input type="button" value="SendCode" id="SendCode" />
                    <script src="../js/sendCode.js"></script>
                    <br><br><br>
                    Verifycode:<input type = "text"  id="inputCode" name="inputCode" placeholder="Please enter code" onblur="compareCode()"/>
                    <img id="isRight" src="../images/white.png">
                </p>
                <p th:if="${msg!=null}" th:text="${msg}"></p>
                <input type="submit" name="signonbyphone" value="Login" />
                <p>Need a user name and password?
                    <a href="/account/newAccountForm">Register Now!</a>
                </p>

            </fieldset>
        </form>
        <script>
            var xhr;
            function compareCode(){
                var code = document.getElementById("inputCode").value;
                xhr = new XMLHttpRequest();
                xhr.open("GET","/account/compare?code="+code,true);
                xhr.onreadystatechange = pCode;
                xhr.send(null);
            }
            function pCode(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200) {
                        var responseInfo = xhr.responseText;

                        if(responseInfo == 'T'){
                            document.getElementById("isRight").src =
                                "../images/isExist.png" ;
                        }
                        else if(responseInfo =='F'){
                            document.getElementById("isRight").src =
                                "../images/wronguser.png" ;
                        }
                    }
                }
            }

        </script>
    </div>
    <div th:replace="common/bottom"></div>
</body>
</html>